/**
 * Created by Xuelei.kong on 2016/7/5.
 */
;(function ($) {
    $.fn.sHelper=function (options) {
        var list = [];
        this.each(function(i, me){
            list.push(new sHelper(me, options));
        });
        return list;

    }
    function sHelper(elem,options) {
        this.$el=$(elem);
        this.init(options);
    }

    sHelper.prototype={
        init:function (options) {
            var me = this;
            me.opts = $.extend({}, {
                url:null,
                width:me.$el.outerWidth(true),
                height:me.$el.outerHeight(true),
                idx:-1,
                val:"",
                callback : function(){}
            }, options);
            me.$el.wrap('<div style="width:'+me.opts.width+'px;height:'+me.opts.height+'px" class="sHelper_wrap"></div>');
            me.$el.after('<div class="helper"></div>');
            me.helperElem=me.$el.next();
            this.bindEvent();
        },
        bindEvent:function () {
            var me=this;
            var bind_name = 'input';
            if (navigator.userAgent.indexOf("MSIE") != -1){
                bind_name = 'propertychange';
            }
            me.$el.bind(bind_name, function(){
                var val=$.trim($(this).val());
                if(me.opts.val!=val){
                    me.opts.val=val;
                    me.getSuggestList(val);
                }

            })
            me.$el.bind('keyup',function (e) {
                var event=window.event||e
                var keyCode=event.keyCode;
                me.upAndDown(keyCode);
            });
            me.$el.bind("keyup",function (e) {
                var event=window.event||e
                var keyCode=event.keyCode;
                if(keyCode==13 && !me.helperElem.is(":empty")){
                    $(this).val(me.helperElem.find(".selected").html());
                    me.helperElem.empty().hide();
                }
            })


           /* me.$el.focus(function () {
                var val=$.trim($(this).val());
                // me.getSuggestList(val);
            });*/
            me.$el.on("click",function (e) {
                var event = window.event || e;
                event.stopPropagation();
            })
            me.helperElem.on("mouseenter",'.item',function () {
                $(this).addClass('selected').siblings().removeClass('selected');
                me.opts.idx=$(this).index();
            })
            me.helperElem.on("mouseleave",'.item',function () {
                $(this).removeClass('selected');
                me.opts.idx=$(this).index();
            })
            $(document).on("click",function () {
                me.helperElem.hide();
            })
            me.helperElem.on('click','a',function () {
                var val=$(this).html();
                me.$el.val(val)

            })
        },
        upAndDown:function (keyCode) {
        var me=this;
          if(keyCode==38){
              me.opts.idx--;
              if(me.opts.idx==-2){
                  me.opts.idx=me.helperElem.find(".item").length-1;
              }
              selectedStyle();
          }else if(keyCode==40){
              console.log(me.opts.idx);
              me.opts.idx++;
              if( me.opts.idx==me.helperElem.find(".item").length){
                  me.opts.idx=0;
              }
              selectedStyle();
          }
            function selectedStyle() {
                console.log(me.opts.idx);
                me.helperElem.find('.item').eq(me.opts.idx).addClass('selected').siblings().removeClass('selected');
            }
        },

        getSuggestList:function (val) {
            var me=this;
            $.ajax({
                url:me.opts.url,
                dataType:"jsonp",
                type:"GET",
                data:{
                    from:"headSearch",
                    module:'searchSuggest',
                    query:val,
                    jp:true
                },
                jsonp:"callback",
                jsonpCallback:"suggest",
                success:function(data){
                    me.helperElem.empty();
                    me.opts.idx=-1;
                    if(!data.length){
                       // me.helperElem.hide();
                        me.helperElem.hide();
                    }else{
                        me.helperElem.show();
                        $.each(data,function (idx, item) {
                            me.helperElem.append('<a class="item" href="javascript:void(0)">'+item[0]+'</a>')
                        })
                    }
                }
            });
        }
    }

})(jQuery)
/*
* @ url 联想搜索的接口地址
* */
$('.shelper').sHelper({
    url:"http://api.search.gome.com.cn/p/suggest"
});